<template>
<div>
<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>事件办理情况</span>
	</div>
	<el-row>
	<el-form :inline="true" :model="form" >
		<el-form-item >
			<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
	    </el-form-item>

		<el-form-item >
		    <el-cascader 
				style="width:400px;"
				filterable
				:options="treedata"
				:props="props1"
				filterable
				change-on-select
				v-model="selectedOptions">
				</el-cascader>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="init">查询</el-button>
		</el-form-item>
		
	</el-form>
	</el-row>

	<el-row>
		<el-card class="box-card mt20">
			<v-chart :options="options" />
		</el-card>
	</el-row>


	<el-row :gutter="20">
		<el-col :span="12">
			<el-card class="box-card mt20">
				<v-chart :options="options1" />
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card class="box-card mt20">
				<v-chart :options="options2" />
			</el-card>
		</el-col>
		
	</el-row>
</el-card>
</div>
</template>

<script>
import daterange from '@/components/daterange'

import Vue from 'vue'
import ECharts from 'vue-echarts'

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'


export default {
	
	name : 'eventstatistics',
	
	data () {
		const colors = ['#F56C6C', '#67C23A', '#d14a61'];

		return {
		  	list : [],
		  	list1 : [],

		  	form : {},

		  	s_e : [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

		  	treedata : [],

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			selectedOptions : ['1'],




			options: {
		  		color : colors,

		        tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },

			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        data:['已办理', '待办理', '办结率']
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                type: 'shadow'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '事件总数量',
			            axisLabel: {
			                formatter: '{value} 个'
			            },
			            axisLine: {
			                lineStyle: {
			                    color: colors[0]
			                }
			            },
			        },
			        {
			            type: 'value',
			            name: '办结率',
			            min: 0,
			            max: 100,
			            axisLabel: {
			                formatter: '{value} %'
			            },
			            splitLine : {
			            	show : false,
			            }
			        }
			    ],
			    series: [
			    ]
		    },


		    options1 : {
			    title : {
			        text: '问题统计',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        //data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			        data : [],
			    },
			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    series : [
			        {
			            name: '问题统计',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:[
			                // {value:335, name:'直接访问'},
			                // {value:310, name:'邮件营销'},
			                // {value:234, name:'联盟广告'},
			                // {value:135, name:'视频广告'},
			                // {value:1548, name:'搜索引擎'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			},


			options2 : {
			    title: {
			        text: '事件总数',
			    },
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        data: ['事件总数量',]
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01]
			    },
			    yAxis: {
			        type: 'category',
			        //data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
			        data : [],
			    },
			    series: [
			        {
			            name: '事件总数量',
			            type: 'bar',
			            //data: [18203, 23489, 29034, 104970, 131744, 630230]
			            data : [],
			        },
			        
			    ]
			},

		}
	},

	props : {

	},

	components : {
		daterange,
		'v-chart': ECharts,
	},

	computed : {
		
	},

	methods : {

		init () {
			this.options.series = [];
			this.options.xAxis[0].data = [];
			this.options2.yAxis.data = [];
			this.options2.series[0].data = [];

			this.options1.series[0].data = [];
			this.options1.legend.data = [];

			this.$http({
				fun : 'eventstatistics',
				requestType : 'get',
				id : this.selectedOptions[this.selectedOptions.length - 1],
				start_time : this.s_e[0] + ' 00:00:00',
				end_time : this.s_e[1] + ' 23:59:59',
				cb : res => {
					console.log(res);
					this.list = res;

					// -- 数据 -- //
					let yb = {
						'name' : '已办理',
						'type' : 'bar',
						'data' : [],
					};

					let db = {
						'name' : '待办理',
						'type' : 'bar',
						'data' : [],
					};

					let bjl = {
						'name' : '办结率',
						'type' : 'line',
						yAxisIndex: 1,
						'data' : [],
					};

					let order = {
						'name' : '订单',
						'type' : 'line',
						'yAxisIndex' : 1,
						'data' : [],
					};
					// -- 数据 -- //

					res.forEach(item => {
						yb.data.push(item.ybnum);
						db.data.push(item.dbnum);
						this.options.xAxis[0].data.push(item.company_name);

						if(item.ybnum + item.dbnum == 0){
							bjl.data.push(0);
						}else{
							bjl.data.push((item.ybnum / (item.ybnum + item.dbnum) * 100).toFixed(2));
						}

						this.options2.yAxis.data.push(item.company_name);
						this.options2.series[0].data.push(item.ybnum + item.dbnum);

					})

					this.options.series.push(yb);
					this.options.series.push(db);
					this.options.series.push(bjl);

				}
			});


			this.$http({
				fun : 'questionstatistics',
				requestType : 'get',
				id : this.selectedOptions[this.selectedOptions.length - 1],
				start_time : this.s_e[0] + ' 00:00:00',
				end_time : this.s_e[1] + ' 23:59:59',
				cb : res => {
					console.log(res);
					this.list1 = res;

					res.forEach(item => {
						this.options1.series[0].data.push({
							name : item.question_typename,
							value : item.num,
						})
						this.options1.legend.data.push(item.question_typename);
					})
				}
			});

		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();

		this.$http({
			fun : 'grideList',
			cb : res => {
				console.log(res);
				const result = this.$util.transData(res, 'id', 'parent_id', 'children');
				console.log(result);
				this.treedata = result;
			}
		});

	},

}
</script>

<style scoped>
.echarts {
  width: 100%;
}
</style>
